import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import styled from 'styled-components';
import {
  Tldraw, Editor, throttle,
  HistoryEntry,
  StoreListener,
  TLRecord,
  TLStoreWithStatus,
  createTLStore,
  defaultShapeUtils,
  uniqueId,
  createShapeId,
  createBindingId,
} from 'tldraw'
import 'tldraw/tldraw.css'

import { UserAvatar } from 'tauri-plugin-mg-platform-api';

function App() {

  const [editor, setEditor] = useState<Editor | null>(null);

  const [snapshot, setSnapshot] = useState(null);

  return (
    <div style={{ position: 'fixed', inset: 0, top: '0px', right: '0px' }}>
      {
        snapshot ? (
          <Tldraw
            snapshot={snapshot}
            onMount={(editor) => {
              setEditor(editor);
            }} />
        ) : (
          <Tldraw
            // store={store}
            onMount={(editor) => {
              setEditor(editor);
            }} />
        )
      }
    </div>
  );
}

export default App;
